<template>
  <div>
    <Card dis-hover :bordered="false">
      <Row :gutter="64">
        <Col span="4">
          <List class="ivu-sidebar">
            <span
              v-for="item in sidebar"
              :key="item.id"
              @click="hqfun(item.id)"
            >
              <ListItem :class="item.id === hqid ? 'ivu-active' : ''">{{
                item.name
              }}</ListItem>
            </span>
          </List>
        </Col>
        <Col span="20">
          <div v-if="hqid === 1">
            <ratio :departmentList="departmentList"></ratio>
          </div>
          <div v-else-if="hqid === 2">
            <areas :departmentList="departmentList"></areas>
          </div>
          <div v-else-if="hqid === 3">
            <consultant :departmentList="departmentList"></consultant>
          </div>
          <div v-else-if="hqid === 4">
            <channel :departmentList="departmentList"></channel>
          </div>
          <div v-else-if="hqid === 5">
            <disease :departmentList="departmentList"></disease>
          </div>
          <div v-else-if="hqid === 6">
            <labelGroup :departmentList="departmentList"></labelGroup>
          </div>
          <!-- <div v-else-if="hqid === 7">
                    <iframe width="1024" height="612" src="https://app.powerbi.com/view?r=eyJrIjoiZWQyOWM4ODctN2JlMy00NTA2LWFkNmMtMmQ4ZDM0MDRiYjlhIiwidCI6Ijk0NDVjM2RjLTBjN2YtNGI2Ni1hYjRmLWQ1YjJlY2FkYzZiZiIsImMiOjEwfQ%3D%3D" frameborder="0" allowFullScreen="true"></iframe>
                </div> -->
          <div v-else-if="hqid === 8">
            <iframe
              width="1024"
              height="612"
              src="https://app.powerbi.com/view?r=eyJrIjoiZWIzYzJkOTEtMzdmOC00NTRjLTg3ODktNGUwNmNhNWI3NjI5IiwidCI6Ijk0NDVjM2RjLTBjN2YtNGI2Ni1hYjRmLWQ1YjJlY2FkYzZiZiIsImMiOjEwfQ%3D%3D"
              frameborder="0"
              allowFullScreen="true"
            ></iframe>
          </div>
          <div v-else-if="hqid === 9">
            <iframe
              width="1024"
              height="612"
              src="https://app.powerbi.com/view?r=eyJrIjoiZjE1ZDVhZTgtYzUzMS00Yzk2LWFjZTQtOGVkNzA5MjYwNzkyIiwidCI6Ijk0NDVjM2RjLTBjN2YtNGI2Ni1hYjRmLWQ1YjJlY2FkYzZiZiIsImMiOjEwfQ%3D%3D&pageName=ReportSection"
              frameborder="0"
              allowFullScreen="true"
            ></iframe>
          </div>
          <div v-else-if="hqid === 10">
            <iframe
              title="Report Section"
              width="1024"
              height="804"
              src="https://app.powerbi.com/view?r=eyJrIjoiMzIzNGRjZTgtZTIzMi00Yzk0LTgyMTAtZTQ4Y2MzODE2OGRhIiwidCI6Ijk0NDVjM2RjLTBjN2YtNGI2Ni1hYjRmLWQ1YjJlY2FkYzZiZiIsImMiOjEwfQ%3D%3D"
              frameborder="0"
              allowFullScreen="true"
            ></iframe>
          </div>
          <!-- <div v-else-if="hqid === 9">
                    <iframe width="1024" height="612" src="https://app.powerbi.com/view?r=eyJrIjoiYThiOGVjZmItOGQ3ZS00ZmE4LWE2NzAtZDY1MTk5M2Q3MDZmIiwidCI6Ijk0NDVjM2RjLTBjN2YtNGI2Ni1hYjRmLWQ1YjJlY2FkYzZiZiIsImMiOjEwfQ%3D%3D" frameborder="0" allowFullScreen="true"></iframe>
                </div> -->
        </Col>
      </Row>
    </Card>
  </div>
</template>
<script>
import { getReportDepartment } from "@/api/TApi/index.js";
import consultant from "./consultant";
import channel from "./channel";
import disease from "./disease";
import labelGroup from "./label";
import areas from "./area";
import ratio from "./ratio";
export default {
  name: "arrivedReport",
  components: {
    ratio,
    consultant,
    channel,
    disease,
    labelGroup,
    areas,
  },
  data() {
    return {
      departmentList: [],
      sidebar: [
        { id: 1, name: "月到诊占比" },
        { id: 2, name: "地区" },
        { id: 3, name: "人员" },
        { id: 4, name: "渠道" },
        { id: 5, name: "疾病类型" },
        { id: 6, name: "标签" },
        // { id: 7, name: '渠道分析' },
        { id: 8, name: "朋友圈" },
        { id: 9, name: "完善度" },
        { id: 10, name: "项目任务跟进" },
        // { id: 9, name: '搜索词' }
      ],
      month: "2020-08",
      hqid: 1,
    };
  },
  methods: {
    hqfun(id) {
      this.hqid = id;
    },
    _getReportDepartment() {
      getReportDepartment().then((res) => {
        this.departmentList = res;
      });
    },
  },
  created() {
    this._getReportDepartment();
  },
};
</script>
<style scoped>
.ivu-sidebar span {
  cursor: pointer;
}

.ivu-active {
  font-weight: bold;
  color: #55b6ec;
}
</style>
